<template>
  <div id="map" class="map-page">
    <!-- + - 中心 底图切换 -->
    <RBBtn class="rbbtn" :map="map"></RBBtn>
    <!-- 经纬度信息 -->
    <LBItem class="lbitem" :map="map"></LBItem>
    <!-- 标点 测距 测面 删除 -->
    <RTBtn class="rtbtn" :map="map"></RTBtn>
    <!-- 图层显隐 查询 新增 -->
    <LCBtn class="lcbtn" :map="map"></LCBtn>
    <!-- 弹唱信息 编辑 删除 -->
    <PopupInfo
      class="popup-info"
      id="popup"
      ref="popup"
      :popupData="popupData"
    ></PopupInfo>
  </div>
</template>

<script>
import { Map, View } from "ol";
import "ol/ol.css";
import { tiandituVecLayer, tiandituImgLayer } from "./config/MapUrl";
import RBBtn from "./components/RightBottomBtn.vue";
import LBItem from "./components/LeftBottomItem.vue";
import RTBtn from "./components/RightTopBtn.vue";
import { vector } from "./config/drawLayer";
import LCBtn from "./components/LeftCenterBtn.vue";
import { getLayer } from "./config/vecLayer";
import Select from "ol/interaction/Select";
import PopupInfo from "./components/PopupInfo.vue";
import Overlay from "ol/Overlay";
// import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";
import { getStyle } from "./config/style";
import { searchLayer } from "./config/search";
import { addLayer } from "./config/transact";
import { drawKriging } from "./config/kriging_layer";

const LayersGroup = [
  tiandituVecLayer.vec_w,
  tiandituVecLayer.cva_w,
  tiandituImgLayer.img_w,
  tiandituImgLayer.cia_w,
  vector,
];

export default {
  components: {
    RBBtn,
    LBItem,
    RTBtn,
    LCBtn,
    PopupInfo,
  },

  data() {
    return {
      map: null,
      popup: null,
      popupData: null,
      selectSingleClick: null,
    };
  },

  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: LayersGroup,
        view: new View({
          projection: "EPSG:4326",
          center: [118.13, 24.49],
          zoom: 13,
          maxZoom: 18,
          minZoom: 9,
        }),
      });

      // 移除双击事件
      let interactions = this.map.getInteractions().getArray();
      this.map.removeInteraction(interactions[1]);
    },

    async addLayer() {
      // 加载geoserver图层
      let pointLayer = await getLayer("xm_shoppoint", 3);
      this.map.addLayer(pointLayer);
      let lineLayer = await getLayer("xm_lrdl", 2);
      this.map.addLayer(lineLayer);
      let polygonLayer = await getLayer("xm_building", 1);
      this.map.addLayer(polygonLayer);
      let _searchLayer = searchLayer;
      this.map.addLayer(_searchLayer);
      await drawKriging(this.map);
      let _addLayer = addLayer;
      this.map.addLayer(_addLayer);
      this.mapClick();
    },

    mapClick() {
      // 点击geoserver弹窗
      let popup = document.getElementById("popup");
      if (this.popup == null) {
        this.popup = new Overlay({
          element: popup,
          autoPan: true,
          autoPanMargin: 100,
        });
      }
      this.map.addOverlay(this.popup);
      popup.style.display = "block";

      if (this.selectSingleClick == null) {
        let layers = [];
        this.map.getAllLayers().forEach((v, i) => {
          if (i > 4) {
            layers.push(v);
          }
        });

        this.selectSingleClick = new Select({
          // 只对特定图层生效
          layers: layers,
          // 选中样式
          style: (feature) => {
            let type = this.selectSingleClick.getLayer(feature).get("name");
            let size =
              type === "xm_shoppoint"
                ? feature.getProperties().features.length
                : "";
            return getStyle(type, true, size);
          },
        });
        this.map.addInteraction(this.selectSingleClick);
      }

      this.selectSingleClick.on("select", (e) => {
        let clickFeature = e.selected;
        let selectFeature = this.selectSingleClick.getFeatures();

        // 画图时不显示弹窗
        if (this.$store.state.draw) {
          // 清空选中要素
          selectFeature.clear();
          return;
        }

        if (clickFeature.length > 0) {
          // 要素对应的自定义的图层名
          let layer = this.selectSingleClick.getLayer(clickFeature[0]);

          // 要素对应的自定义的图层名
          let type = this.selectSingleClick
            .getLayer(clickFeature[0])
            .get("name");

          // 要素属性
          let data = { features: null, layer: null, type: null, lonlat: null };
          data.features = clickFeature[0];

          // 只可选中一个要素
          if (
            type === "xm_shoppoint" &&
            clickFeature[0].getProperties().features.length !== 1
          ) {
            this.$message("所选范围内有多个点，请选择其中一个点");
            selectFeature.clear();
            return;
          }

          // 查询几何范围不显示弹窗
          if (data.features.get("name") == "draw") {
            selectFeature.clear();
            return;
          }

          let lonlat = e.mapBrowserEvent.coordinate;

          data.layer = layer;
          data.type = type;
          data.lonlat = lonlat;
          this.popupData = data;

          // 弹窗位置
          this.popup.setPosition(lonlat);
        } else {
          this.$refs.popup.resetForm();
          this.popup.setPosition(null);
        }
      });
    },
    delAction() {
      this.$refs.popup.resetForm();
      this.popup.setPosition(null);
    },
  },

  mounted() {
    this.initMap();
    this.addLayer();
  },
};
</script>

<style scoped>
.map-page {
  height: 100%;
  width: 100%;
  position: relative;
}
::v-deep .ol-control {
  display: none;
}
.rbbtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
}
.lbitem {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
}
.rtbtn {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
.lcbtn {
  position: absolute;
  /* left: 10px; */
  top: 8.15%;
  z-index: 1;
}
.popup-info {
  /* position: absolute; */
  display: none;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>